<template>
    <div style="width: 100%;height: 100%">
        <div class="loading-span" v-if="loading"><a-spin  size="large"/></div>
        <rx-layout v-else>
            <div slot="left" width="300" showButton="true">
                <div style="display: flex;flex-direction: column;overflow: auto;align-items: center;height: 100%">
                    <a-button type="primary" ghost class="rx-sync" @click="getBuildHistory"><a-icon type="sync" />刷新</a-button>
                    <span v-if="history.length==0" class="rx-empty" ><a-empty/></span>
                    <div class="rx-Jenkins-left" v-else>
                        <div class="rx-Jenkins" @click="showTree=!showTree">
                            <my-icon :type="showTree?'iconicon-test49':'iconicon-test47'"></my-icon>
                            <my-icon class="rx-icon" type="iconwenjianziliao"></my-icon>
                            <span class="rx-Jenkins-name">构建历史</span>
                        </div>
                        <div v-if="showTree" class="rx-Jenkins-tree">
                            <div class="rx-Jenkins-tree-list" @click="onSelect(item.id)"
                                 :class="[selectKey==item.id?'rx-Jenkins-hover':'']" v-for="item in history" :key="item.id"
                                 :title="item.title">
                                <my-icon :style="{'color':statusMap[item.result].color}" :type="statusMap[item.result].icon"
                                         class="rx-tree-icon"></my-icon>
                                <span class="rx-tree-name">{{ item.title }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="center" style="padding: 10px;">
                <span v-if="history.length==0" class="rx-empty" style="height: 100%"><a-empty/></span>
                <span v-else-if="detailsLoading" class="rx-empty" style="height: 100%"><a-spin  size="large"/></span>
                <div class="rx-sy-center" v-else-if="details">
                    <div class="rx-Details">
                        <div class="rx-Details-top">
                            <my-icon class="rx-Details-icon" :style="{'color':statusMap[details.result].color}"
                                     :type="statusMap[details.result].icon"></my-icon>
                            <div style="flex: 1;margin-left: 10px">
                                <div class="rx-Details-result"><span class="rx-result"
                                                                     :style="{'color':statusMap[details.result].color}">{{ statusMap[details.result].text }}</span><span
                                    class="rx-duration">持续时间:{{ details.duration }}</span></div>
                                <div class="rx-executionTime">运行时间:{{ details.executionTime }}</div>
                            </div>
                        </div>
                        <div class="rx-Details-center">
                            <div class="rx-center-list">
                                <span class="rx-center-name">运行人:</span>
                                <span class="rx-center-user">{{ details.executionUser }}</span>
                            </div>
                            <div class="rx-center-list">
                                <span class="rx-center-name">分支名称:</span>
                                <span class="rx-center-user"><my-icon
                                    type="iconliuchengjiedian"></my-icon>{{ details.name }}</span>
                            </div>
                            <div class="rx-center-list">
                                <span class="rx-center-name">代码仓:</span>
                                <a class="rx-center-user" style="color: rgba(66, 133, 244, 1)" :href="details.gitUrl"  target="_blank">{{ details.gitUrl }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="rx-collapse" :class="[activeKey.length==0?'':'rx-collapse-activeKey']">
                        <a-collapse v-model="activeKey" :destroyInactivePanel="true">
                            <a-collapse-panel key="1">
                                <template #header>
                                    <div style="display: flex;align-items: center">
                                        <my-icon class="rx-collapse-name" :style="{'color':statusMap[details.result].color}"
                                                 :type="statusMap[details.result].icon"></my-icon>
                                        <span>执行日志</span></div>
                                </template>
                                <div class="rx-collapse-log">
                                    <rx-monaco-editor
                                        ref="sql"
                                        v-model="details.log"
                                        language="java"
                                    >
                                    </rx-monaco-editor>
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                </div>
            </div>
        </rx-layout>
    </div>
</template>

<script>
/**
 * 流水线明细.
 */
import {RxMonacoEditor} from '@lowcode/jpaas-common-lib'
import SysJenkinsApi from "@/api/system/core/sysJenkins";

export default {
    name: "SysPipelineDetails",
    components:{
        RxMonacoEditor
    },
    props: {
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
        pipeline: {
            type: Object
        },
    },
    data() {
        return {
            parentPath: "",
            history: [],
            details: "",
            activeKey: ['1'],
            showTree: true,
            statusMap: {
                'SUCCESS': {color: 'green', text: "运行成功", icon: 'iconicon-test29'},
                'FAILURE': {color: 'red', text: "运行失败", icon: 'iconicon-test26'},
                'ABORTED': {color: 'grey', text: "运行中断", icon: 'iconicon-test31'},
                'UNSTABLE': {color: 'orange', text: "警告", icon: 'iconicon-test37'},
                'BUILDING': {color: 'blue', text: "编译中", icon: 'icontime_fill'},
            },
            selectKey: '',
            loading:true,
            detailsLoading:true,
        }
    },
    created() {
        this.parentPath = this.getParentPath(this.pipeline.url, this.pipeline.name);
        this.getBuildHistory();
    },
    methods: {
        getBuildHistory() {
            SysJenkinsApi.getBuildHistory({
                url: this.parentPath,
                builderId: this.pipeline.builderId,
                jobName: this.pipeline.name
            }).then(res => {
                if (res.success) {
                    this.loading = false
                    this.history = res.data;
                    if (this.history.length > 0) {
                        this.onSelect(this.history[0].id)
                    }
                }
            })
        },
        getParentPath(urlString, jobName) {
            // 解析 URL
            const url = new URL(urlString);
            // 获取路径
            let path = url.pathname;
            // 查找子路径 "job/dev" 的位置
            const subPath = '/job/' + jobName;
            const subPathIndex = path.indexOf(subPath);
            // 如果找到了子路径，则截取父路径
            if (subPathIndex !== -1) {
                const newPath = path.slice(0, subPathIndex);
                return url.origin + newPath + '/';
            } else {
                // 如果没有找到子路径，则返回原始 URL
                return url.href;
            }
        },
        /**
         * 点击树
         * @param selectedKeys
         */
        onSelect(selectedKeys) {
            this.detailsLoading = true;
            this.selectKey = selectedKeys
            this.loadJobDetails(selectedKeys);
        },
        /**
         * 加载明细
         * @param number
         */
        loadJobDetails(number) {
            let params = {
                url: this.parentPath,
                builderId: this.pipeline.builderId,
                jobName: this.pipeline.name,
                number: number
            }
            SysJenkinsApi.loadJobDetails(params).then(res => {
                if (res.success) {
                    this.detailsLoading = false
                    this.details = res.data;
                }
            })
        }
    },
    watch: {}
}
</script>

<style scoped>
.rx-sync{
    width: 250px;
    margin-top: 20px;
}
.rx-empty{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.rx-sy-center {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rx-Details {
    border: 1px solid rgba(232, 232, 232, 1);
}

.rx-Details-top {
    display: flex;
    height: 64px;
    opacity: 1;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 16px 10px 16px;
}

.rx-Details-icon {
    font-size: 40px;
}

.rx-Details-result {
    display: flex;
}

.rx-result {
    font-size: 16px;
    font-weight: 700;
    flex: 1;
}

.rx-duration {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
}

.rx-executionTime {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
}

.rx-Details-center {
    display: flex;
    grid-gap: 100px;
    padding: 10px 16px;
}

.rx-center-list {
    display: flex;
    font-size: 14px;
    flex-direction: column;
}

.rx-center-name {
    color: rgba(0, 0, 0, 0.65);
}

.rx-center-user {
    color: rgba(0, 0, 0, 0.85);
    margin-top: 4px;
}

.rx-collapse {
    margin-top: 16px;
    flex: 1;
    margin-bottom: 20px;
    overflow: auto;
}

.rx-collapse-activeKey >>> .ant-collapse {
    height: 100%;
    overflow: auto;
    background: white;
}

.rx-collapse >>> .ant-collapse-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rx-collapse-log {
    height: 100%;
    background: white;
    overflow: hidden;
}

.rx-collapse >>> .ant-collapse-content {
    flex: 1;
    overflow: auto;
}
.rx-collapse>>>.ant-collapse-content-box{
    height: 100%;
}

.rx-collapse-name {
    font-size: 20px;
    margin-right: 5px;
}

.rx-Jenkins-left {
    padding: 10px 20px;
    overflow: auto;
    width: 100%;
    flex: 1;
}

.rx-Jenkins {
    display: flex;
    height: 32px;
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

.rx-Jenkins-name {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 0px;
    color: rgba(0, 0, 0, 0.85);
    margin-left: 9px;
}

.rx-icon {
    color: rgba(255, 191, 67, 1);
    font-size: 20px;
    margin-left: 5px;
}

.rx-Jenkins-tree {
    margin-left: 32px;
}

.rx-Jenkins-tree-list {
    height: 32px;
    opacity: 1;
    border-radius: 4px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 10px 0px 10px;
    cursor: pointer;
    margin-bottom: 1px;
}

.rx-Jenkins-tree-list:hover {
    background: rgba(239, 245, 255, 1);
}

.rx-tree-name {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 5px;
}

.rx-Jenkins-tree-list:hover .rx-tree-name {
    color: rgba(66, 133, 244, 1);
}

.rx-Jenkins-hover {
    background: rgba(239, 245, 255, 1);
}

.rx-tree-icon {
    font-size: 20px;
}
.loading-span{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>